<template>
  <div>
    <div>
      <el-button @click="handleAddUser" class="adds">新增用户</el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="result.users"
      tooltip-effect="dark"
      style="width: 100%; border-radius: 10px; margin-top: 10px"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="id" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="用户名" width="100">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="真实姓名" width="100">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      <el-table-column label="昵称" width="100">
        <template slot-scope="scope">{{ scope.row.nickName }}</template>
      </el-table-column>
      <el-table-column label="角色" width="100">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.roleName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="100">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.gender == 1">男</el-tag>
          <el-tag type="danger" v-else>女</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机" width="100">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column label="邮箱" width="100">
        <template slot-scope="scope">{{ scope.row.email }}</template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditUser(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleAssignRole(scope.$index, scope.row)"
            >分配角色</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="result.totalSize"
      >
      </el-pagination>
    </div>
    <!-- 用户新增 -->
    <UserAdd
      ref="userAddRef"
      @closeAddDialog="closeAddDialog"
      :addVisible="addVisible"
      :title="title"
    ></UserAdd>
    <!-- 分配角色 -->
    <AssignRole
      ref="AssignRef"
      @closeAddDialog="closeAddDialog"
      :roleVisible="roleVisible"
    ></AssignRole>
  </div>
</template>

<script>
import { UserPageApi, delUserApi } from "@/Api/UserApi";
import delay from "@/utils/delay";
import UserAdd from "@/components/UserAdd.vue";
import AssignRole from "@/components/AssignRole.vue";
export default {
  data() {
    return {
      //用户分页信息 参数
      page: {
        pageNo: 1,
        pageSize: 5,
      },
      result: {
        users: [],
        totalPage: 1,
        totalSize: 0,
      },
      //用户数组
      loading: false,
      addVisible: false,
      //新增修改标题
      title: "",
      //分配角色
      roleVisible: false,
    };
  },
  components: {
    UserAdd,
    AssignRole,
  },
  mounted() {
    this.loadUsers();
  },
  methods: {
    async loadUsers() {
      try {
        this.loading = true;
        const res = await UserPageApi(this.page);
        await delay();
        if (res.status == 200) {
          this.result.users = res.data.records;
          this.result.totalPage = res.data.pages;
          this.result.totalSize = res.data.total;
          this.loading = false;
        } else {
          this.loading = false;
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
          });
        }
      } catch (error) {
        this.loading = false;
        console.log(error);
        this.$message({
          message: "系统异常",
          type: "error",
          duration: 1000,
        });
      }
    },
    //新增
    handleAddUser() {
      this.addVisible = true;
      this.title = "新增用户";
      console.log(this.$refs.userAddRef);

      this.$refs.userAddRef.openDialog();
    },
    //修改
    handleEditUser(index, row) {
      this.addVisible = true;
      this.title = "修改用户";
      console.log(index, row);

      this.$refs.userAddRef.openDialog(row.id);
    },
    //分配角色
    handleAssignRole(index, row) {
      this.roleVisible = true;
      this.$refs.AssignRef.openDialog(row.id);
    },
    //删除
    async handleDelete(index, row) {
      this.$confirm(`是否要删除用户${row.username}?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delUserApi(row.id);

            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1000,
                onClose: () => {
                  this.page.pageNo = 1;
                  this.loadUsers();
                },
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 1000,
              });
            }
          } catch (error) {
            console.log(error);
            this.$message({
              message: "系统异常",
              type: "error",
              duration: 1000,
            });
          }

          //
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭新增窗口
    closeAddDialog(isReflash = false) {
      this.addVisible = false;
      isReflash && this.loadUsers();
      this.roleVisible = false;
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.loadUsers();
    },
    handleCurrentChange(pageNo) {
      this.page.pageNo = pageNo;
      this.loadUsers();
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: 600px;
  height: 32px;
  margin: 10px auto;
  margin-bottom: 40px;
}
.adds {
  margin-top: 10px;
  width: 100px;
  border-radius: 6px;
}
</style>